<template>
	<div class="time">
		<p v-if='msTime.show'>订单将于 <span class="red">{{msTime.minutes}}</span>分<span class="red">{{msTime.seconds}}</span>秒后自动关闭</p>
		<p v-else class="red">订单已关闭</p> 
	</div>	
</template>


<script>
 import { MessageBox } from '@/ui-components';
 import {mapGetters, mapMutations} from "vuex";
	export default {
		props: {
			// 活动结束时间
			endTime: {
				type: Number
			},
			orderType: {
				type: Number
			}
		},
		computed: {
			...mapGetters('xxy', [
				"getPay",
			]),	
		},
		data() {
			return {
					msTime:{
						minutes:'5',		//分钟
						seconds:'0',			//秒
						// current:'',      //当前时间
						 show:true,
					},
					timer: null,
					
			}
		},
		watch: {
			endTime (){
				// console.log(newval,'newval')
				// console.log(oldval,'oldval')
				console.log(this.endTime,'this.endTime')
				console.log(this.getPay,'this.getPay')
				if(this.getPay) {
					if(this.endTime > 0){
						this.msTime.show = true;
						setTimeout(()=>{
							this.runTime(this.endTime)
						},1);
					} else {
						this.msTime.show = false;
					}
				} 
					
			}
			
		},
		created() {
			console.log(this.orderType,this.getPay,'9999')
			 this.orderType==12 && this.getPay ? this.runTime(this.endTime) : ''
		},
		methods: {

			runTime (tm) {
				console.log(tm,'tmmm')
				let msTime = this.msTime;
				msTime.minutes = parseInt((tm % (1000 * 60 * 60)) / (1000 * 60));
				msTime.seconds = parseInt((tm % (1000 * 60)) / 1000);

				if (this.getPay) {
					if( tm > 0 ){
						this.msTime.show = true;
						this.timer = setTimeout(()=>{
							this.runTime(tm-=1000)
						},1000)
						//console.log('tm',tm)
					}else {
						this.msTime.show = false
						this.$store.commit('xxy/setPay', false)
						console.log('订单已取消')
						clearInterval(this.timer);
						this.timer = null;
						this.$emit('cancel')
					} 
				}
				
			}
		 }
		
	}
</script>

<style scoped>
.time {
	padding-top: 0.3rem;
}
.time .red {
	color: #EF5423;
	font-size: 0.75rem;
}
</style>
